<!--
 * @作者: lqx
 * @LastEditors: lqx
 * @FilePath: \net-vue\src\view\Home.vue
-->
<template>

    <el-container>
        <el-header class="homeContainer">
            <span class="title">网络运维管理系统</span>
        </el-header>
        <el-container>
            <el-aside width="200px;" style="height: 100%;">
                <el-menu
                        class="el-menu-vertical-demo"
                        background-color="#1e2640"
                        text-color="#fff"
                        unique-opened
                        router
                        active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-s-data"></i>
                            <span>全局总览</span>
                        </template>
                        <el-menu-item index="/home">仪表盘</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-s-platform"></i>
                            <span>设备监控</span>
                        </template>
                        <el-menu-item index="/devForm">
                            流量展示
                        </el-menu-item>
                    </el-submenu>
                    
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-s-marketing"></i>
                            <span>网络拓扑</span>
                        </template>
                        <el-menu-item index="/topo">拓扑展示</el-menu-item>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-s-cooperation"></i>
                            <span>故障管理</span>
                        </template>
                        <el-menu-item index="/trap">
                            TRAP日志
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>MIB浏览</span>
                        </template>
                        <el-menu-item index="/mib">mib显示</el-menu-item>
                    </el-submenu>
                    
                    
                </el-menu>
            </el-aside>
            <el-scrollbar  class="default-scrollbar" wrap-class="default-scrollbar__wrap" view-class="p20-scrollbar__view" :native="false">
                <el-main style="height: 100%; overflow-y: hidden;">
                <el-breadcrumb style="margin-bottom: 10px;" separator="/"
                               v-if="this.$router.currentRoute.path !='/home'">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
                </el-breadcrumb>
                <div v-if="this.$router.currentRoute.path =='/home'">
                    <overall/>
                </div>
                <router-view/>
            </el-main>
            </el-scrollbar>
        </el-container>
    </el-container>

</template>

<script>
    import overall from "./overall/overall";

    export default {
        name: "Home",
        components: {
            overall,
        },
        data() {
            return {}
        },
        computed: {},
        methods: {}
    }
</script>

<style >
    .el-scrollbar__wrap.default-scrollbar__wrap {
        overflow-x: auto;
    }
    .default-scrollbar {
        width: 100%;
        height: 100%;
    }
    .flex-scrollbar {
        width: auto;
        height: auto;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .el-aside {
        background-color: rgb(30, 38, 64);
        color: #333;
        text-align: center;
        line-height: 200px;
    }


    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container .el-aside {
        line-height: 260px;
    }

    #app, .el-container {
        height: 100%;
    }

    .homeContainer {
        background-color: #111;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 25px;
        box-sizing: border-box;
    }

    .homeContainer .title {
        color: #fff;
        font-size: 20px;
        line-height: 50px;
        width: 200px;
        transition: background-color ease .3s;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #ccc;
        font-size: 16px;
        display: flex;
        align-items: center;
    }

    .el-dropdown-link img {
        width: 40px;
        height: 40px;
        border-radius: 30px;
        margin-left: 10px;
    }

    .box-card {
        margin-bottom: 10px;
    }

</style>
